<template>
    <div class="game_account">
        <div class="c-flex c-a-c top">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">Q币充值</el-breadcrumb-item>
                <el-breadcrumb-item>订单记录</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="search">
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item label="订单时间">
                    <el-date-picker v-model="searchForm.startTime" type="date">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="至">
                    <el-date-picker v-model="searchForm.endTime" type="date">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="商品名称:">
                    <el-input v-model="searchForm.goodsName" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="用户账号:">
                    <el-input v-model="searchForm.userPhone" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="充值QQ号:">
                    <el-input v-model="searchForm.userQq" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="支付方式:">
                    <el-select v-model="searchForm.paymentWay" placeholder="请选择">
                        <el-option label="不限" value=""></el-option>
                        <el-option label="微信" value="0"></el-option>
                        <el-option label="支付宝" value="1"></el-option>
                        <el-option label="钱包" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="渠道:">
                    <el-select v-model="searchForm.cName" placeholder="请选择渠道">
                        <el-option v-for="item in optionsChannel" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态:">
                    <el-select v-model="searchForm.orderState" placeholder="请选择">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="成功" value="SUCCESS"></el-option>
                        <el-option label="失败" value="FAIL"></el-option>
                        <el-option label="待付款" value="UNPAID"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button @click="goReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="account_lists">
            <template>
                <el-table :data="orderData" border style="width: 100%">
                    <el-table-column prop="orderNumber" label="订单编号">
                    </el-table-column>
                    <el-table-column label="订单时间">
                        <template slot-scope="scope">
                            <span class="list_stock">{{scope.row.createTime | formatTime}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="goodsName" label="商品名称">
                    </el-table-column>
                    <el-table-column prop="orderPrice" label="订单金额(元)">
                    </el-table-column>
                    <el-table-column label="付款方式">
                        <template slot-scope="scope">
                            <span>{{scope.row.paymentWay | formatPay}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="userQq" label="充值QQ号">
                    </el-table-column>
                    <el-table-column prop="userPhone" label="用户账号">
                    </el-table-column>
                    <el-table-column prop="cName" label="渠道">
                    </el-table-column>
                    <el-table-column label="状态">
                        <template slot-scope="scope">
                            <span class="list_stock">{{scope.row.orderState | formatorderState}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作">
                        <template slot-scope="scope">
                            <div v-if="scope.row.orderState == 'FAIL'">
                                <el-button type="text" size="small" @click="rePay(scope.row.userQq,scope.row.id)">重新充值</el-button>
                            </div>
                            <div v-else>--</div>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </div>
        <div class="block Pagination">
            <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" layout="prev, pager, next, jumper"
                :page-size="10" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                optionsChannel: [],
                searchForm: {},
                orderData: [],
                currentPage: 1,
                total: 10,
            };
        },
        mounted() {
            var optionparams = {};
            optionparams.id = 42;
            this.axios
                    .get("shop/classify/classifyMenuList", { params: optionparams })
                    .then(res => {
                        var _data = res.data;
                        this.optionsChannel = _data.data;
                    })
                    .catch(error => console.log(error));

            var params = {};
            params.pageSize = 10;
            this.getList(params);
        },

        methods: {
            getList(params) {
                this.axios
                    .get("qq/order/list", { params: params })
                    .then(res => {
                        var _data = res.data;
                        if (_data.code == 200) {
                            this.orderData = _data.data.list;
                            this.total = _data.data.total;
                        } else {
                            this.$message.error(_data.message);
                        }
                    })
                    .catch(error => console.log(error));
            },
            //查询
            onSubmit() {
                var params = this.searchForm;
                params.startTime = (this.searchForm.startTime) ? (this.searchForm.startTime.getTime()) : '';
                params.endTime = (this.searchForm.endTime) ? (this.searchForm.endTime.getTime()) : '';

                this.getList(params);

            },
            //换页
            handleCurrentChange(val) {
                var params = this.searchForm;
                params.pageNum = this.currentPage = val;
                params.pageSize = 10;
                this.getList(params);
            },
            rePay(qq, id) {
                this.$confirm('确定给QQ：' + qq + '重新充值吗?', '重新充值', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios
                        .get("qq/order/recharge/" + id)
                        .then(res => {
                            var _data = res.data;
                            if (_data.code == 200) {
                                this.$message({
                                    message: '操作成功！',
                                    type: 'success'
                                });
                                var params = {};
                                params.pageSize = 10;
                                this.getList(params);
                            } else {
                                this.$message.error(_data.message);
                            }
                        })
                        .catch(error => console.log(error));
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });

            },
            goReset() {
                this.searchForm = {};
            },
        }
    };
</script>
<style lang="less">
    .game_account {
        padding: 15px;

        .top {
            height: 60px;
            border-bottom: 1px solid #dcdcdc;
            margin-bottom: 20px;
            justify-content: space-between;
        }

        .account_lists {
            margin-top: 15px;

            .list_stock {
                display: inline-block;
                width: 100%;
                height: 100%;
                cursor: pointer;
            }
        }

        .el-dialog__body {
            padding: 0 20px 30px;
            margin-top: -38px;

            .storedia {
                justify-content: flex-end;
                margin: 0 50px 35px 0;

                .supplier {
                    margin-right: 15px;
                }
            }
        }
    }

    .el-dialog__header {
        border-bottom: 1px solid #dcdcdc;
    }

    .el-pagination {
        text-align: right;
    }
</style>